<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <div class="btn-box">
    </div>
    <el-divider content-position="left">
      <h1 class="font40">开票信息</h1>
    </el-divider>
    <div class="form-box">
      <el-form ref="form"
               :model="sizeForm"
               label-width="120px"
               size="mini">
        <el-form-item label="公司名称">
          <el-input v-model="sizeForm.name"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="纳税识别号">
          <el-input v-model="sizeForm.tin"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="地  址">
          <el-input v-model="sizeForm.address"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电  话">
          <el-input v-model="sizeForm.phone"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="sizeForm.bank"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="账  号">
          <el-input v-model="sizeForm.bankNo"
                    :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="修改开票信息"
               :visible.sync="AddFormVisible">
      <el-form :model="addForm"
               ref="addForm"
               :rules="rules">
        <el-form-item label="开户行"
                      :label-width="formLabelWidth"
                      prop="bank">
          <el-input v-model="addForm.bank"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号"
                      :label-width="formLabelWidth"
                      prop="bankNo">
          <el-input v-model="addForm.bankNo"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购公司名称"
                      :label-width="formLabelWidth"
                      prop="shopName">
          <el-input v-model="addForm.shopName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购公司列表"
                      :label-width="formLabelWidth"
                      prop="">
          <el-select v-model="searchForm.shopId"
                     placeholder="请选择采购公司">
            <el-option label="全部"
                       value="1"></el-option>
            <el-option label="禁用"
                       value="0"></el-option>
            <el-option label="禁用"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票电话"
                      :label-width="formLabelWidth"
                      prop="invoicePhone">
          <el-input v-model="addForm.invoicePhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开票地址"
                      :label-width="formLabelWidth"
                      prop="invoiceAddress">
          <el-input v-model="addForm.invoiceAddress"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="纳税识别号"
                      :label-width="formLabelWidth"
                      prop="tin">
          <el-input v-model="addForm.tin"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="closeAddForm">取 消</el-button>
        <el-button type="primary"
                   @click="sendHouse('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  name: "houseDetail",
  components: {

    breadcrumbs,
  },
  data () {
    return {
      addForm: {},
      formLabelWidth: "120px",
      AddFormVisible: false,
      shopId: "",
      sizeForm: {},
      searchForm: {
        current: 1,
        size: 10
      },
      rules: {
        "name": [{
          required: true,
          message: '请输入客户姓名',
          trigger: 'blur'
        }],
        "invoiceAddress": [{
          required: true,
          message: '请输入开票地址',
          trigger: 'blur'
        }],
        "shopName": [{
          required: true,
          message: '请输入采购公司名称',
          trigger: 'blur'
        }],
        "bankNo": [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        "invoicePhone": [{
          required: true,
          message: '请输入开票电话',
          trigger: 'blur'
        }],
        "bank": [{
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        }],
        "shopId": [{
          required: true,
          message: '请选择采购公司',
          trigger: 'change'
        }],
        "tin": [{
          required: true,
          message: '请选择纳税识别号',
          trigger: 'blur'
        }],

      }
    }
  },
  created () {
    this.shopId = this.$route.query.shopId;
    this.houseData(this.searchForm.current, this.searchForm.size, this.shopId);
  },
  methods: {
    closeAddForm () {
      this.AddFormVisible = true;
      this.addForm = {};
    },
    sendHouse (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.shopList.editShopInvoice({
            bank: this.addForm.bank,
            bankNo: this.addForm.bankNo,
            tin: this.addForm.tin,
            invoicePhone: this.addForm.invoicePhone,
            shopName: this.addForm.shopName,
            shopId: this.addForm.shopId,
            invoiceAddress: this.addForm.invoiceAddress
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "开票信息修改成功"
              })
              this.AddFormVisible = false;
              this.addForm = {};
              this.houseData(this.searchForm.current, this.searchForm.size, this.shopId);
              this.invoicePhone();
            }
          })
        }
      })
    },
    showEdit () {
      this.AddFormVisible = true
    },
    houseData (curr, size, hid) {
      this.$api.shopList.getAdminShopInfo({
        shopId: hid
      }).then(res => {
        if (res.code == 200) {
          this.sizeForm = res.data
        }
      })
    },
    handleSizeChange (v) {
      console.log(v)
      this.searchForm.size = v;
      this.houseData(this.searchForm.current, v, this.searchForm.hid);
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.getTableData(v, this.searchForm.size, this.searchForm.hid);
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
    onSubmit () {
      console.log('submit!');
    }
  }
}
</script>

<style lang="less" scoped>
.font40 {
  font-size: 20px;
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
  // float: right;
  // border:1px red solid;
  .btnEdit {
    display: flex;
    align-content: space-around;
    align-items: center;
    float: right;
  }
}
.form-box {
  // padding-top:20px;
  padding: 20px 50px 0 0;
}
</style>
